<!--
 * @Description: 表格组件
 * @Author:
 * @Github:
 * @Date:
 * @LastEditors: dh
 * @LastEditTime: 2022-10-27 15:11:50
 -->
<template>
	<div class="table-container">
		<!-- 条件搜索 -->
		<el-row v-if="!noSearch" class="table-top-button-group">
			<el-col :span="24">
				<slot name="searchCondition" />
			</el-col>
		</el-row>

		<!-- 过滤数据 -->
		<!-- <div class="searchWord">
      <el-form>
        <el-form-item label="搜索：">
          <el-input
            v-model="search"
            style="display: inline-block"
            placeholder="请输入搜索内容"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div> -->

		<!-- 表格内容 -->
		<div class="table-list-container" :class="{ 'no-page': noPage }">
			<el-table
				ref="my_table"
				:data="tabelData"
				:height="customTableHeight || '100%'"
				:highlight-current-row="highlight"
				stripe
				:show-header="!noTableHearder"
				:row-class-name="tableRowClassName"
				style="width: 100%"
				@selection-change="selectionChange"
				@row-click="rowClick"
				@row-dblclick="rowdblclick"
			>
				<el-table-column v-if="!noSelectBox" type="selection" width="55" />
				<el-table-column v-if="!noIndex" type="index" label="序号" align="center" :resizable="false" :index="indexMethod" width="55px" />
				<slot name="table-column" />
			</el-table>
		</div>

		<!-- 分页 -->
		<el-row v-if="!noPage" class="pagination-container">
			<el-col :span="24">
				<el-pagination
					:current-page.sync="tableData.pageNum"
					:disabled="disabled()"
					class="pagination-position"
					:page-size="tableData.pageSize"
					layout="total, prev, pager, next, jumper"
					:total="tableData.total"
				/>
			</el-col>
		</el-row>

		<!-- 底部操作 -->
		<el-row v-if="!noBottom" class="table-bottom-button-group">
			<el-col :span="24">
				<slot name="bottomCondition">
					<span>请添加bottomCondition功能或Table传递noBottom</span>
				</slot>
			</el-col>
		</el-row>
	</div>
</template>
<script>
/* eslint-disable */

export default {
	props: {
		// 复选框
		noSelectBox: {
			default: false,
		},
		// 条件区
		noSearch: {
			type: Boolean,
			default: false,
		},
		// 是否显示表头
		noTableHearder: {
			type: Boolean,
			default: false,
		},
		// 分页
		noPage: {
			type: Boolean,
			default: false,
		},
		// 底部按钮
		noBottom: {
			type: Boolean,
			default: true,
		},
		// 序号
		noIndex: {
			type: Boolean,
			default: false,
		},
		// 数据
		tableData: {
			type: Object,
			default: () => {
				return {
					list: [],
					pageNum: null,
					pageSize: 10,
					total: null,
				};
			},
		},
		// 表格整体高度
		customTableHeight: {
			default: 0,
			type: Number,
		},
		// 点击高亮当前行
		highlight: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			search: "",
		};
	},
	// 模糊搜索
	computed: {
		tabelData(el) {
			// el 组件实例 可以结构出属性和方法
			const search = this.search;
			if (search) {
				return this.tableData.list.filter(data => {
					return Object.keys(data).some(key => {
						return String(data[key]).toLowerCase().indexOf(search) > -1;
					});
				});
			}
			return this.tableData.list;
		},
	},
	watch: {
		"tableData.pageNum"() {
			this.$emit("sizeChange");
		},
		"tableData.pageSize"() {
			this.$emit("sizeChange");
		},
	},
	methods: {
		// 设置间隔行背景色
		tableRowClassName({ row, rowIndex }) {
			return rowIndex % 2 == 0 ? "warning-row" : "success-row";
		},
		// 序号
		indexMethod(index) {
			return index + 1 + this.tableData.pageSize * (this.tableData.pageNum - 1);
		},
		// 行被单击
		rowClick(row, event, column) {
			// this.$emit("rowClick", row, event, column);
			this.$emit("input", row);
			this.$refs.my_table.toggleRowSelection(row);
		},
		// 行被双击
		rowdblclick(row, event, column) {
			this.$emit("input", row);
			alert(JSON.stringify(row));
		},
		// 勾选复选框触发
		selectionChange(val) {
			this.$emit("selectionChange", val);
		},
		disabled(e) {
			if (this.tableData.total) {
				if (this.tableData.total > this.tableData.pageSize) {
					return false;
				} else {
					return true;
				}
			} else {
				return true;
			}
		},
	},
};
</script>
<style lang="scss">
.table-container {
	padding: 10px;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: rgba($color: teal, $alpha: 0.2);
	border-radius: 16px;
	//搜素栏
	.table-top-button-group {
		.el-row {
			margin: 0 !important;
		}
	}
	//列表
	.table-list-container {
		flex: 1;
		overflow: auto;
		.el-table__header tr,
		.el-table__header th {
			padding: 0;
			height: 60px;
		}
		.el-table__body tr,
		.el-table__body td {
			padding: 0;
			height: 60px;
		}
		// .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
		// .el-table__body tr.current-row > td {
		//   background-color: #ffec8b;
		// }
		// .el-table tbody tr:hover > td {
		//   background-color: red !important;
		// }
		// .warning-row {
		//   background: darkseagreen;
		// }
		// .success-row {
		//   background: pink;
		// }
	}
	// 分页
	.pagination-container {
		text-align: right;
		background: #fbfcff;
		padding: 8px 6px;
		// border: 1px solid rgba(205, 221, 237, 1);
		// border-top: none;
	}
}
</style>
